<template>
  <div>
    <el-card class="box-card" style="width: 80%; margin: 20px auto">
      <el-form
        ref="spuBaseForm"
        :model="dataForm"
        label-width="120px"
        :rules="spuBaseInfoRules"
      >
        <el-form-item label="商品名称" prop="spuName">
          <el-input v-model="dataForm.spuName"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="spuDescription">
          <el-input v-model="dataForm.spuDescription"></el-input>
        </el-form-item>
        <el-form-item label="选择分类" prop="catelogId">
          <category-cascader
            :catelogPath.sync="catelogPath"
          ></category-cascader>
        </el-form-item>
        <el-form-item label="选择品牌" prop="brandId">
          <el-select
            placeholder="请选择"
            v-model="dataForm.brandId"
            filterable
            clearable
          >
            <el-option
              v-for="item in brands"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="商品重量(Kg)" prop="weight">
          <el-input-number
            v-model.number="dataForm.weight"
            :min="0"
            :precision="3"
            :step="0.1"
          ></el-input-number>
        </el-form-item> -->
        <!-- <el-form-item label="商品介绍" prop="descript">
          <multi-upload v-model="dataForm.descript"></multi-upload>
        </el-form-item> -->

        <el-form-item label="商品图集" prop="images">
          <multi-upload v-model="dataForm.images"></multi-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitStep"
            >下一步：设置基本参数</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import MultiUpload from "@/components/upload/multiUpload";
import CategoryCascader from "@/views/common/category-cascader";
import BrandApi from "@/api/product/brand.js";
export default {
  components: { CategoryCascader, MultiUpload },
  data() {
    return {
      catelogPath: [],
      brands: [],
      dataForm: {
        //商品详情 大图
        //descript: [],
        //商品图集
        images: [],
      },
      spuBaseInfoRules: {
        spuName: [
          { required: true, message: "请输入商品名字", trigger: "blur" },
        ],
        spuDescription: [
          { required: true, message: "请编写一个简单描述", trigger: "blur" },
        ],
        catelogId: [
          { required: true, message: "请选择一个分类", trigger: "blur" },
        ],
        brandId: [
          { required: true, message: "请选择一个品牌", trigger: "blur" },
        ],
        // descript: [
        //   { required: true, message: "请上传商品详情图集", trigger: "blur" },
        // ],
        // images: [
        //   { required: true, message: "请上传商品图片集", trigger: "blur" },
        // ],
        // weight: [
        //   {
        //     type: "number",
        //     required: true,
        //     message: "请填写正确的重量值",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  created() {
    BrandApi.getAllBrand().then((response) => {
      this.brands = response.data;
    });
  },
  watch: {
    catelogPath(path) {
      this.dataForm.catelogId = path[path.length - 1];
    },
  },
  methods: {
    //基本属性设置step0完成提交
    submitStep() {
      this.$refs.spuBaseForm.validate((valid) => {
        if (valid) {
          this.$emit("submitData", this.dataForm);
        } else {
          return false;
        }
      });
    },
  },
};
</script>
